//   抽样方案
import { Input, Button, Space, Table, Modal, Form, Select, Row, Col, message, Popconfirm, Switch, DatePicker, DatePickerProps } from 'antd';
import React from 'react';
import { useState, useEffect } from 'react'
import type { ColumnsType } from 'antd/lib/table';
import { SearchOutlined, SyncOutlined, DownloadOutlined, CloudDownloadOutlined } from '@ant-design/icons';
import itemgroup from '../itemgroup.module.scss'
import axios from '../../../../utils/axios'
import moment from 'moment';
const SamplingPlan = () => {
  // 获取表格数据
  const getdate = () => {
    axios({
      url: '/material/selectSampleProcedure'
    }).then(res => {
      console.log(res.data.data.listFix);
      setData(res.data.data.listFix)
    }).catch(error => console.log(error)
    )
  }
  const [data, setData] = useState<DataType[]>()
  useEffect(() => {
    getdate()
  }, [])
  // 查询
  const [searchdata] = Form.useForm()
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const [distoryid, setDisturyid] = useState<string>()
  const [distorycode, setDisturycode] = useState<string>()
  const onsearchid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setDisturyid(e.target.value)
  };
  const onsearchgroup = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setDisturycode(e.target.value)
  };
  // 重置
  const resoveval = () => {
    setDisturyid('')
    setDisturycode('')
    getdate()
  }
  // 设置修改表单的数据
  const [editForm] = Form.useForm();
  const [addForm] = Form.useForm();
  // tab表格
  interface DataType {
    key: String;
    sampleProcedureId: number;//序列号
    sampleProcedureName: string;//序列号
    aqlValue: number;//物料组
    nummberUpperLimit: number;//抽样方案
    nummberLowerLimit: number;//维护时间
    sampleProcedureNumber: number;//操作人
    sampleProcedureStrictNumber: number;
    projectTime: string;
    userName: string
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'sampleProcedureId',
    },
    {
      title: '抽样方案',
      dataIndex: 'sampleProcedureName',
    },
    {
      title: '检验方案',
      dataIndex: 'checkoutName',
    },
    {
      title: 'AQL',
      dataIndex: 'aqlValue',
    }
    ,
    {
      title: '来货数量上限',
      dataIndex: 'nummberUpperLimit',
    },

    {
      title: '来货数量下限',
      dataIndex: 'nummberLowerLimit',
    },
    {
      title: '抽样数量',
      dataIndex: 'sampleProcedureNumber',
    },
    {
      title: '加严抽样数量',
      dataIndex: 'sampleProcedureStrictNumber',
    },
    {
      title: '维护时间',
      dataIndex: 'projectTime',
    },
    {
      title: '维护人',
      dataIndex: 'userName',
    },
    {
      title: '操作',
      key: 'Operation',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            setEditIsModalVisible(true);
            editForm.setFieldsValue(record)
            setLasttime(moment(record.projectTime).format('YYYY-MM-DD'))
          }}>编辑</a>
          <Popconfirm
            title="确认删除此条数据吗?"
            onConfirm={() => { confirm(record.sampleProcedureId) }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  //弹出框的隐藏关闭
  // 添加
  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
  // 修改
  const [isEditModalVisible, setEditIsModalVisible] = useState(false);
  // 添加模态框
  const addmodule = () => {
    addForm.resetFields()
    setIsAddModalVisible(true)
  }
  // 添加完成
  const addhandleOk = () => {
    setIsAddModalVisible(false);
    console.log(addForm.getFieldsValue());
    axios({
      url: "/material/addSampleProcedure",
      method: 'post',
      data: { ...addForm.getFieldsValue(), projectTime: lasttime,aqlId:2,userId:2,sampleProcedureState:0 }
    }).then(res => {
      console.log(res);
      if (res.status === 200) {
        getdate()
      }
    }).catch(error => console.log(error)
    )
  };
  // 取消添加
  const addhandleCancel = () => {
    setIsAddModalVisible(false);
  };
  // 维护时间
  const [lasttime, setLasttime] = useState<string>()
  // 上次次型式时间
  const timeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setLasttime(dateString)
  };
  // 编辑模态框
  const handleOk = () => {
    setEditIsModalVisible(false);
    console.log(editForm.getFieldsValue(), lasttime);
    axios({
      url: '/material/updateSampleProcedure',
      method: "post",
      data: { ...editForm.getFieldsValue(), projectTime: lasttime, aqlId: 8, userId: 2, sampleProcedureState: 0 }
    }).then(res => {
      console.log(res);
      if (res.status === 200) {
        getdate()
      }
    }).catch(error => console.log(error)
    )
  };
  const handleCancel = () => {
    setEditIsModalVisible(false);
  };
  // 查询
  const searchval = () => {
    console.log(distoryid, distorycode);
    axios({
      url: '/material/selectSampleProcedure',
      params: { checkoutName: distoryid, aqlId: distorycode }
    }).then(res => {
      console.log(res);
      setData(res.data.data.listFix)
    }).catch(error => {
      console.log(error);
    })
  }
  // 删除确认按钮
  const confirm = (id: number) => {
    console.log(id);
    axios({
      url: '/material/deleteSampleProcedure',
      method: 'post',
      params: { sampleProcedureId: id }
    }).then(res => {
      if (res.status === 200) {
        getdate()
        message.success('删除成功');
      }
    }).catch(error => console.log(error)
    )
  };
  const { Option } = Select
  return <div className={itemgroup.box}>
    {/* 查询 */}
    {/* <div>
      <Form
        name="basic"
        form={searchdata}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Row>
          <Col>
            <Form.Item
              label="物料类型"
              name="usernames"
              style={{ marginRight: 20 }}
            >
              <Select style={{ width: 150 }}>
                <Option value="86">常规检验物料</Option>
                <Option value="87">常规免检物料</Option>
                <Option value="88">火攻检验物料</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item
              label="自动派单"
              name="usernamew"
            >
              <Select style={{ width: 150 }}>

              </Select>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" ghost icon={<SearchOutlined />} htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button style={{ marginLeft: 20, color: '#ffc069', border: '1px solid #ffc069' }} icon={<SyncOutlined style={{ color: '#ffc069' }} />} onClick={() => { resoveval() }} >
                重置
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>

    </div> */}
    {/* 搜索按钮 */}
    <div>
      <label htmlFor="">检验方案:</label>
      <Input className={itemgroup.searchone} style={{ width: 200 }} placeholder="物料组编号" allowClear onChange={onsearchid} value={distoryid} />
      <label htmlFor="">AQLID:</label>
      <Input className={itemgroup.searchone} style={{ width: 200 }} placeholder="物料组" allowClear onChange={onsearchgroup} value={distorycode}/>
      <Button onClick={() => { searchval() }} style={{ color: '#1890FF', border: '1px solid #2696FF', marginRight: 20 }} icon={<SearchOutlined />}>查询</Button>
      <Button onClick={() => { resoveval() }} style={{ color: '#ffc069', border: '1px solid #ffc069' }} icon={<SyncOutlined style={{ color: '#ffc069' }} />}>重置</Button>
    </div>
    {/* 新增等功能 */}
    <div className={itemgroup.tewbox}>
      <Button onClick={() => { addmodule() }} style={{ marginRight: 10 }} type="primary" size={'small'}>
        +新增
      </Button>
    </div>
    {/* 表格 */}
    <div>
      <Table rowKey={(record) => { return record.sampleProcedureId }} pagination={{ showQuickJumper: true, defaultPageSize: 2, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} columns={columns} dataSource={data} />
    </div>
    {/* 模态框 */}
    <div>
      <Modal width='900px' title="物料组修改" visible={isEditModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form
          form={editForm}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
        >
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="序号"
                name={"sampleProcedureId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>


            </Col>
            <Col span='12'>
              <Form.Item
                label="抽样方案"
                name={"sampleProcedureName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row >
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="检验方案"
                name={"checkoutName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

            </Col>
            <Col span='12'>
              <Form.Item
                label="AQL"
                name={"aqlValue"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="来货数量上限"
                name={"nummberUpperLimit"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 250 }} />
              </Form.Item>
            </Col>
            <Col>
              <Form.Item
                label="来货数量下限"
                name={"nummberLowerLimit"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 250 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="抽样数量"
                name={"sampleProcedureNumber"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="加严抽样数量"
                name={"sampleProcedureStrictNumber"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="维护时间"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <DatePicker onChange={timeChange} defaultValue={moment(lasttime, 'YYYY-MM-DD')} />
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="维护人"
                name={"userName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
    {/* 新增 */}
    <div>
      <Modal width='800px' title="物料组新增" visible={isAddModalVisible} onOk={addhandleOk} onCancel={addhandleCancel}>
        <Form
          form={addForm}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
        >
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="抽样方案"
                name={"sampleProcedureName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span='12'>

              <Form.Item
                label="维护人"
                name={"userName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row >
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="检验方案"
                name={"checkoutName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

            </Col>
            <Col span='12'>
              <Form.Item
                label="AQL"
                name={"aqlValue"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="来货数量上限"
                name={"nummberUpperLimit"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 250 }} />
              </Form.Item>
            </Col>
            <Col>
              <Form.Item
                label="来货数量下限"
                name={"nummberLowerLimit"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 250 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="抽样数量"
                name={"sampleProcedureNumber"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="加严抽样数量"
                name={"sampleProcedureStrictNumber"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="维护时间"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <DatePicker onChange={timeChange} />
              </Form.Item>
            </Col>
            <Col span='12'>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  </div>
}
export default SamplingPlan